<template>
    <el-dialog v-model="dialogFormVisible" append-to-body :close-on-click-modal="false" :before-close="handleClose"
        destroy-on-close>
        <div class="dialog-container">
            <div class="buttons">
                <div class="title"><span>新设计类型</span></div>
                <el-button style="margin: 12px" size="large">项目设计</el-button>
                <el-button type="primary" style="margin: 12px" size="large" disabled>数据设计</el-button>
                <el-button type="success" style="margin: 12px" size="large" disabled>模型设计</el-button>
            </div>
            <div class="buttons">
                <div class="title"><span>新设计来源</span></div>
                <el-button style="margin: 12px" size="large" @click="createNewTag">创建空白设计标签页</el-button>
                <el-button type="primary" style="margin: 12px" size="large" disabled>创建模板设计标签页</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script setup name="AddConfirm">
import { ref } from "vue";

const dialogFormVisible = ref(false)
const x6id = ref('')
const emits = defineEmits(['handleClose'])
const confirmCreate = ref(false)

const init = (id) => {
    confirmCreate.value = false
    dialogFormVisible.value = true
    x6id.value = id
}

const createNewTag = () => {
    confirmCreate.value = true
    dialogFormVisible.value = false
    emits('handleClose', true, x6id.value)
}

const handleClose = (done) => {
    emits('handleClose', confirmCreate.value, x6id.value)
    done()
}

defineExpose({
    init
})
</script>

<style lang="scss" scoped>
.dialog-container {
    display: flex;
    justify-content: center;
    .buttons {
        margin: 0 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {
            width: 100%;
            height: 36px;
            background-color: #ecf4ff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding-left: 24px;
            border-left: 4px solid #409eff;
            font-weight: bold;
        }
    }
}
</style>